<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="buy.css">
</head>

<body>
    <div id="app" class="shopping-cart">
        <!-- Header -->
        <header class="header">
            <div class="header-title">
                <span style="font-size: 25px;font-weight: 900;">购物车</span>
                <span class="location">· 玄武区</span>
            </div>
            <div class="header-edit">
                编辑
                <span class="circle-icon">
                    <i class="icon">⟳</i>
                </span>
            </div>
        </header>

        <!-- Store and Product -->
        <div class="cart-content">
            <!-- Store Info -->
            <div style="margin-left: 13px;margin-right: 13px;border-radius: 5px;">
                <div class="store-info" style="border-radius: 10px;">
                    <div class="store-left">
                        <label class="checkbox-container">
                            <input type="checkbox" v-model="storeChecked" />
                            <span class="checkmark"></span>
                        </label>
                        <span class="emoji">😊</span>
                        <span class="store-name" style="font-weight: 900">苏宁自营</span>
                    </div>
                    <div class="shipping-status">已免运费</div>
                </div>

                <!-- Product Item -->
                <div class="product-item" style="border-radius: 10px;">
                    <div class="product-select">
                        <label class="checkbox-container">
                            <input type="checkbox" v-model="productChecked" />
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="product-content">
                        <div class="product-info">
                            <div class="product-image">
                                <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-jKUZt5Ap52oDcGWu4aMfDCdOrO5yqH.png"
                                    alt="容声冰箱" class="product-thumbnail" />
                            </div>
                            <div class="product-details">
                                <div class="product-title">
                                    容声(Ronshen)509升一级法式多门对开四开门电冰箱灰色家用...
                                </div>
                                <div class="product-specs">【多门对开门】5...需变频, 送服务</div>
                                <div class="product-promotion">
                                    <span class="promotion-tag">3期免息</span>
                                    <span class="promotion-tag">30天价保</span>
                                </div>
                                <div class="product-price-container">
                                    <div class="product-price">
                                        <span class="price-symbol" style="color: #FC5500;">¥</span>
                                        <span class="price-value" style="color: #FC5500;">{{ productPrice }}</span>
                                    </div>
                                    <div class="quantity-control">
                                        <button class="quantity-btn" @click="decreaseQuantity">-</button>
                                        <span class="quantity">{{ quantity }}</span>
                                        <button class="quantity-btn" @click="increaseQuantity">+</button>
                                    </div>
                                </div>
                                <div class="product-gift">
                                    赠品 专享冰压缩机10年+只换不修 ×1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Promotion Banner -->
            <div class="promotion-banner">
               <img src="./广告.jpg" alt="" style="width: 100%;">
            </div>
            <span style="text-align: center;align-items: center;margin-left: 10%;color: #AEB8B8;">————————&nbsp;&nbsp;&nbsp;&nbsp;到底了&nbsp;&nbsp;&nbsp;&nbsp;————————</span>
            <!-- New User Promotion -->
            <div class="new-user-promotion" style="position: absolute;bottom: 20%;right: 0;">
                <img src="./浮窗.jpg" alt="">
            </div>
        </div>

        <!-- Footer Checkout Bar -->
        <div class="checkout-bar">
            <div class="select-all">
                <label class="checkbox-container">
                    <input type="checkbox" v-model="allChecked" />
                    <span class="checkmark"></span>
                </label>
                <span>全选</span>
            </div>
            <div class="total-section">
                <div class="total-price">
                    <span>合计：</span>
                    <span class="price-symbol" style="color: #FC5500;">¥</span>
                    <span class="price-value" style="color: #FC5500;">{{ totalPrice }}</span>
                </div>
                <div class="shipping-free">免运费</div>
            </div>
            <button class="checkout-btn" :disabled="!productChecked">
                去结算({{ quantity }})
            </button>
        </div>
    </div>

    <script>
        const { createApp, ref, computed } = Vue;

        createApp({
            setup() {
                const quantity = ref(1);
                const productPrice = ref(3299);
                const storeChecked = ref(true);
                const productChecked = ref(true);

                const allChecked = computed({
                    get() {
                        return storeChecked.value && productChecked.value;
                    },
                    set(value) {
                        storeChecked.value = value;
                        productChecked.value = value;
                    }
                });

                const totalPrice = computed(() => {
                    return productChecked.value ? (productPrice.value * quantity.value).toFixed(2) : '0.00';
                });

                const increaseQuantity = () => {
                    if (quantity.value < 99) {
                        quantity.value++;
                    }
                };

                const decreaseQuantity = () => {
                    if (quantity.value > 1) {
                        quantity.value--;
                    }
                };

                return {
                    quantity,
                    productPrice,
                    storeChecked,
                    productChecked,
                    allChecked,
                    totalPrice,
                    increaseQuantity,
                    decreaseQuantity
                };
            }
        }).mount('#app');
    </script>
</body>

</html>